<template>
    <header class="header">
        <input type="text" class="search" v-model="val" @keyup.enter="addListFn"/>

        <div class="toggle">
          <input id="toggle-all" type="checkbox" class="toggle-all" v-model="total"/>
          <label for="toggle-all"></label>
        </div>
    </header>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
  data(){
    return {
      val:'',
    }
  },
  computed:{
    ...mapState(['list']),
    total:{
      get(){
        return this.list.every(item=>item.finished)
      },
      set(value){
        this.setTotalList(value);
      }

    }
  },
  methods:{
    ...mapActions(['addList','setTotalList']),
    addListFn(){
      if(this.val!=''&&this.val.trim()!=''){
        const o={
          id:new Date().getTime(),
          title:this.val,
          finished:false
        }
        this.addList(o)
      }

      this.val=''
      
    }

  },
  updated(){
      localStorage.setItem('list',JSON.stringify(this.list))
  }
}
</script>
<style lang="scss" scoped>
     .header {
    position: relative;
    .search {
      width: 100%;
      height: 50px;
      padding: 10px 16px 10px 60px;
      border: none;
      background: rgba(0, 0, 0, 0.003);
      box-shadow: inset 0 -2px 1px rgb(0 0 0 / 3%);
      box-sizing: border-box;
    }
    .toggle {
      width: 60px;
      height: 50px;

      position: absolute;
      left: 0;
      top: 0;
      .toggle-all {
        width: 1px;
        height: 1px;
        border: none;
        opacity: 0;
        position: absolute;
        right: 100%;
        bottom: 100%;
      }
      .toggle-all + label {
        width: 60px;
        height: 40px;
        font-size: 0;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        display: inline-block;
      }
      .toggle-all + label:before {
        content: "❯";
        font-size: 22px;
        color: #e6e6e6;
        padding: 10px 30px;
      }
    }
    
    .toggle-all:checked + label:before {
        color: #737373;
    }

  }
</style>